<template>
  <div>
<!--  头部区域  -->
    <div style="height: 60px; display: flex;">
      <div style="width: 240px; display: flex;align-items: center;padding-left: 20px;background-color: #3a456b">
        <img src="@/assets/imgs/Logo.png" alt="" style="width: 40px;height: 40px;border-radius: 50%;">
        <span style="font-size: 20px; font-weight: bold;color: #eef1fa;margin-left: 5px;">后台管理系统</span>
      </div>
      <div style="flex: 1; border-bottom: 1px solid #ddd;display: flex;align-items: center;padding-left: 20px">
        <span style="margin-right: 5px; cursor: pointer"   @click="router.push('/manage/home')">首页</span><span v-if="router.currentRoute.value.path !== '/manage/home'"> / {{ router.currentRoute.value.meta.name}}</span>
      </div>
      <div style="width: fit-content;padding-right: 20px;display: flex;align-items: center; border-bottom: 1px solid #ddd">
        <el-dropdown>
          <div style="display: flex;align-items: center;">
            <img v-if="data.user?.avatar" style="width: 40px; height: 40px; border-radius: 50%;" :src="data.user?.avatar" alt="">
            <img v-else style="width: 40px; height: 40px; border-radius: 50%;" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
            <span style="margin-left: 5px">{{ data.user?.name }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/manage/person')">个人信息</el-dropdown-item>
              <el-dropdown-item @click="router.push('/manage/updatePassword')">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 头部区域结束 -->

    <!--  下方区域开始-->
    <div style="display: flex">
      <!--      菜单区域开始-->
      <div style="width: 240px;">
        <el-menu router background-color="#3a456b"  active-text-color="#ffffff" text-color="#ffffff" :default-opened-names="['1','2']" :default-active="router.currentRoute.value.path" style="min-height: calc(100vh - 60px)">
          <el-menu-item index="/manage/home">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/front/home">
            <el-icon><House /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Monitor /></el-icon>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/manage/notice" v-if="data.user?.role === 'ADMIN'">系统公告</el-menu-item>
            <el-menu-item index="/manage/notice" v-else>公告信息</el-menu-item>
            <el-menu-item index="/manage/category">攻略分类</el-menu-item>
            <el-menu-item index="/manage/introuction">旅游攻略</el-menu-item>
            <el-menu-item index="/manage/apply">请假申请</el-menu-item>
            <el-menu-item index="/manage/book">图书信息</el-menu-item>
            <el-menu-item index="/manage/record">借阅记录</el-menu-item>
            <el-menu-item index="/manage/lunbo">轮播图片</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2" >
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manage/admin" v-if="data.user?.role === 'ADMIN'">管理员信息</el-menu-item>
            <el-menu-item index="/manage/user">普通用户信息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!--      菜单区域结束-->
      <!--      数据渲染区域开始-->
      <div style="flex: 1;width: 0; padding: 10px;background-color: #d0dff6">
        <RouterView @updateUser = "updateUser"></RouterView>
      </div>
      <!--      数据渲染区域结束-->
    </div>
<!--    下方区域结束-->
  </div>
</template>

<script setup>
import {reactive} from "vue";
import router from "@/router/index.js";

const data  = reactive({
  user:JSON.parse(localStorage.getItem('code_user') || '{}'),
})
const logout=() =>{
  localStorage.removeItem('code_user')
  location.href = '/login'
}
if(!data.user?.id){
  location.href = '/login'
}
const updateUser = () =>{
  data.user = JSON.parse(localStorage.getItem('code_user') || '{}')
}
</script>
<style scoped lang="scss">
:deep(.el-menu){
  background-color: #3a456b;
  border:none;
  .el-sub-menu__title{
    background-color: #3a456b;
    color: #ddd;
  }
  .el-menu-item{
    height: 50px;
    color: #ddd;
  }

 .is-active{
    background-color: #537bee! important;
    color: #fff!important;
  }
  .el-menu-item:not(.is-active):hover,
  is-active:hover {
    background-color: #537bee! important;
    color: #000!important;
  }
  .el-sub-menu__title:hover{
    background-color: #3a456b;
  }
  .el-menu-item:not(.is-active):hover{
    background-color: #7a9fff;
    color: #333;
  }
  .el-dropdown{
    cursor: pointer;
  }
  .el-tooltip__trigger{
    outline: none;
  }
  .el-menu--inline .el-menu-item{
    padding-left: 48px !important;
  }
}

</style>